.m-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #409EFF);

  /* snake */
  .m-spinner__snake {
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    border: 6rpx solid;
    border-top-color: transparent;
    vertical-align: middle;
    background: transparent;
    animation: loading-snake 0.8s linear infinite;
  }

  @keyframes loading-snake {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  /* bounce */

  .m-spinner__bounce {
    position: relative;
    display: inline-block;
    width: 50rpx;
    height: 50rpx;

    .m-bounce {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      opacity: 0.6;
      animation: loading-bounce 2s infinite ease-in-out;
      background-color: currentColor;
    }

    .m-bounce2 {
      animation-delay: -1s;
    }
  }

  @keyframes loading-bounce {

    0%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    50% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  /* circle */
  .m-spinner__circle {
    position: relative;
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    animation: loading-circle 1s linear infinite;
    animation-timing-function: steps(12);

    .m-circle {
      z-index: 9;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      &::before {
        width: 4rpx;
        height: 25%;
        border-radius: 2rpx;
        content: " ";
        display: block;
        margin: 0 auto;
        background: currentColor;
      }
    }
  }

  @keyframes loading-circle {
    0% {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(1turn);
    }
  }

  /* triple */
  .m-spinner__triple {
    margin: 0 auto;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;

    .m-triple {
      margin: 0 5rpx;
      height: 24rpx;
      width: 10rpx;
      display: inline-block;

      .m-rect {
        height: 24rpx;
        width: 100%;
        border-radius: 10rpx;
        animation: stretchdelay 1s infinite;
        transform: rotate(12deg);
        opacity: 0;
        background-color: currentColor;

        &.m-rect1 {
          animation-delay: 0.2s;
        }

        &.m-rect2 {
          animation-delay: 0.4s;
        }

        @keyframes stretchdelay {

          0%,
          40%,
          100% {
            opacity: 0;
            transform: rotate(12deg) scale(0.2, 0.2);
          }

          70% {
            opacity: 1;
            transform: rotate(12deg) scale(1, 1);
          }
        }
      }
    }
  }


  /* dot */
  .m-spinner__dot {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    text-align: center;

    .m-dot {
      display: inline-block;
      padding: 0 4rpx;

      &::after {
        display: inline-block;
        margin-left: 6rpx;
        content: "";
        width: 36rpx;
        font-weight: 600;
        letter-spacing: 4rpx;
        text-align: left;
        animation: dot 1.6s linear infinite;
      }

      @keyframes dot {
        0% {
          content: "";
        }

        25% {
          content: ".";
        }

        50% {
          content: "..";
        }

        75% {
          content: "...";
        }
      }
    }
  }
}